```jsx {13-16}
const ColorPicker = () => {
  const service = useMachine(colorPicker.machine, {
    id: createUniqueId(),
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = createMemo(() => colorPicker.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <div>
        <div {...api().getTransparencyGridProps({ size: "4px" })} />
        <div {...api().getSwatchProps({ value: api().value })} />
      </div>
      {/* ... */}
    </div>
  )
}
```
